<template>
	<view class="container">
		<view class="box">
			<view>喵舍</view>
			<view>
				<view v-for="(item,index) in sushe.resu1.floor1" @click="choosesu(item.id)" :style="{
      backgroundColor: item.id === chooseid ? '#f8e177' : (item.ischoose === '1' ? '#666' : ''),
      pointerEvents: item.ischoose === '1' ? 'none' : 'auto'
    }" :key="item.id" >{{item.name}}</view>
			</view>
			<view>
				<view v-for="(item,index) in sushe.resu1.floor2" @click="choosesu(item.id)" :style="{
      backgroundColor: item.id === chooseid ? '#f8e177' : (item.ischoose === '1' ? '#666' : ''),
      pointerEvents: item.ischoose === '1' ? 'none' : 'auto'
    }" :key="item.id" >{{item.name}}</view>
			</view>
			<view>
				<view v-for="(item,index) in sushe.resu1.floor3" @click="choosesu(item.id)" :style="{
      backgroundColor: item.id === chooseid ? '#f8e177' : (item.ischoose === '1' ? '#666' : ''),
      pointerEvents: item.ischoose === '1' ? 'none' : 'auto'
    }" :key="item.id" >{{item.name}}</view>
			</view>
		</view>
		<view class="box">
			<view>汪舍</view>
			<view>
				<view v-for="(item,index) in sushe.resu2.floor1" @click="choosesu(item.id)" :style="{
      backgroundColor: item.id === chooseid ? '#f8e177' : (item.ischoose === '1' ? '#666' : ''),
      pointerEvents: item.ischoose === '1' ? 'none' : 'auto'
    }" :key="item.id" >{{item.name}}</view>
			</view>
			<view>
				<view v-for="(item,index) in sushe.resu2.floor2" @click="choosesu(item.id)" :style="{
      backgroundColor: item.id === chooseid ? '#f8e177' : (item.ischoose === '1' ? '#666' : ''),
      pointerEvents: item.ischoose === '1' ? 'none' : 'auto'
    }" :key="item.id" >{{item.name}}</view>
			</view>
			<view>
				<view v-for="(item,index) in sushe.resu2.floor3" @click="choosesu(item.id)" :style="{
      backgroundColor: item.id === chooseid ? '#f8e177' : (item.ischoose === '1' ? '#666' : ''),
      pointerEvents: item.ischoose === '1' ? 'none' : 'auto'
    }" :key="item.id" >{{item.name}}</view>
			</view>
		</view>
		<view class="box">
			<view>其他</view>
			<view>
				<view v-for="(item,index) in sushe.resu3.floor1" @click="choosesu(item.id)" :style="{
      backgroundColor: item.id === chooseid ? '#f8e177' : (item.ischoose === '1' ? '#666' : ''),
      pointerEvents: item.ischoose === '1' ? 'none' : 'auto'
    }" :key="item.id" >{{item.name}}</view>
			</view>
			<view>
				<view v-for="(item,index) in sushe.resu3.floor2" @click="choosesu(item.id)" :style="{
      backgroundColor: item.id === chooseid ? '#f8e177' : (item.ischoose === '1' ? '#666' : ''),
      pointerEvents: item.ischoose === '1' ? 'none' : 'auto'
    }" :key="item.id" >{{item.name}}</view>
			</view>
			<view>
				<view v-for="(item,index) in sushe.resu3.floor3" @click="choosesu(item.id)" :style="{
      backgroundColor: item.id === chooseid ? '#f8e177' : (item.ischoose === '1' ? '#666' : ''),
      pointerEvents: item.ischoose === '1' ? 'none' : 'auto'
    }" :key="item.id" >{{item.name}}</view>
			</view>
		</view>
		<view class="box">
			<view><view>自带宿舍</view></view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		<view class="bottom">
			<view @click="goConfirm()" class="button">确定</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,onBeforeMount} from "vue"
	import http from "@/utils/request.js"
	let sushe=ref(null)
	let chooseid=ref(null)
	onBeforeMount(()=>{
		getsushe()
	})
	
	function getsushe(){
		let response=http.get('/sushe/getall')
		response.then(res=>{
			if(res.data.code===200){
				sushe.value=res.data.data
			}
		})
	}
	function choosesu(e){
		chooseid.value=e;
	}
	function goConfirm(){
		if(chooseid.value){
			uni.$emit('receivesushe',chooseid.value)
			uni.navigateBack()
		}
	}
</script>

<style lang="scss">
.box{
	border-top:2rpx solid #666;
	padding: 10rpx 5rpx;
	view{
		display: flex;
		
		view{
			padding: 5rpx 10rpx;
			border: 2rpx solid #666;
			margin: 20rpx;
		}
	}
}

.bottom{
			position: fixed;
			box-shadow: 0 -12rpx 64rpx -14rpx rgba(0, 0, 0, 0.15);
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background-color: #ffffff;
			border-radius:20rpx 20rpx 0 0 ;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.button{
				background-color: #f8e177;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #090300;
				letter-spacing: 0.2em;
				width: 90%;
				height: 70%;
				border-radius: 50rpx;
				
				&:active{
					opacity: 0.7;
				}
			}
		}
</style>
